:root{
    --DFC: #333333;
    --DFS: 20px;
    --MEC: #ffffff;
    --MEB: #7e57c2;
    --MEW: 220px;
    --MEWC: 64px;
    --MAC: #585858;
    --MAB: #ede7f6;
    --MEDC: #ffffff;
    --MEAB: #9575CD;
    --MEAC: #ffffff;
    --MEAM: #673AB7;
    --MEHB: #9575CD;
    --MECS: #ffffff4d;
    --MAW: calc(100% - 220px);
    --MAWC: calc(100% - 64px);
    --MBG: url('./menu-but-bg.svg');
    --HEH: 80px;
}

@keyframes bounce-right {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0);
    }
    40% {
        transform: translateX(-10px);
    }
    60% {
        transform: translateX(-5px);
    }
}

@keyframes width-lengthen {
    0%, 50% {
        width: var(--MEWC);
    }
    100% {
        width: var(--MEW);
    }
}

@keyframes width-shorten {
    0% {
        width: var(--MEW);
    }
    100% {
        width: var(--MEWC);
    }
}

@keyframes main-width-shorten {
    0%, 50% {
        width: var(--MAWC);
    }
    100% {
        width: var(--MAW);
    }
}

@keyframes logo-shorten {
    0%, 41% {
        width: 0;
    }
    48% {
        width: 20px;
    }
    100% {
        width: 140px;
    }
}

@keyframes logo-move {
    0%, 41% {
        padding-left: 0;
    }
    48% {
        padding-left: 2px;
    }
    100% {
        padding-left: 5px;
    }
}

@keyframes float-right {
    0% {
        opacity: 0;
        right: -50px;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0.7;
        right: -1px;
    }
}

@keyframes float-left {
    0% {
        left: -50px
    }
    100% {
        left: -1px;
    }
}
